
<div class="jtk-demo-main" id="jtk-demo-flowchart">

  <!-- main drawing area -->
  <div class="jtk-demo-canvas">

    <jsplumb-surface surfaceId="surface"
                     toolkitId="toolkitId"
                     [view]="view"
                     [renderParams]="renderParams"
                      [toolkitParams]="toolkitParams">

    </jsplumb-surface>

    <!--
        A helper component that ships in the Toolkit since 6.2.0. Provides undo/redo, zoom to fit, etc.
    -->
    <jsplumb-controls surfaceId="surface"></jsplumb-controls>

    <!-- miniview -->
    <jsplumb-miniview surfaceId="surface"></jsplumb-miniview>
  </div>
  <div class="jtk-demo-rhs">
    <!-- the node palette -->
    <div class="sidebar node-palette" jsplumb-surface-drop selector="div" surfaceId="surface" [dataGenerator]="dataGenerator">
      <div data-type="table" class="jtk-schema-palette-item">Table</div>
      <div data-type="view" class="jtk-schema-palette-item">View</div>
    </div>
    <!-- node/edge inspector -->
    <app-inspector surfaceId="surface"></app-inspector>

    <div class="description">
      <p>
        This sample application is a builder for database schemas.
      </p>
    </div>
  </div>
</div>



